<template>
    <div class="about">
        <v-header />
        <v-sidebar />
        <div class="content-box" :class="{ 'content-collapse': collapse }">
            <v-tags></v-tags>

            <div class="content">
                <router-view v-slot="{ Component }">

                    <transition name="move" mode="out-in">
<!--                         设置 保持生存状态的组件，避免路由跳转后，原视图组件内数据丢失-->
<!--                         include接收一个数组 ,其内元素为routes中的name值（此处tagsList的数据 便是routes中的name相同）-->
                        <keep-alive :include="tagsList">
                            <component :is="Component" />
                        </keep-alive>
                    </transition>
                </router-view>
<!--                 <el-backtop target=".content"></el-backtop>-->
            </div>
        </div>
    </div>
</template>
<script>
import { computed } from "vue";
import { useStore } from "vuex";
import vHeader from "../components/Header.vue";
import vSidebar from "../components/Sidebar.vue";
import vTags from "../components/Tags.vue";
export default {
    components: {
        vHeader,
        vSidebar,
        vTags,
    },
    setup() {
        const store = useStore();
        // 遍历 store.state.tagsList，将所有name返回给 tagsList
        const tagsList = computed(() =>

            store.state.tagsList.map((item) => item.name)
        );
        const collapse = computed(() => store.state.collapse);
        return {
            tagsList,
            collapse,
        };
    },
};
</script>
